/**
 * 水印指令
 *
 *    v-waterMarker="{ text: '张三', color: 'red', font: '16px Microsoft JhengHei' }"
 */

export default {
  mounted(el, binding) {
    console.log(binding)
    const {
      text = '版权所有，盗版必究',
      color = 'red',
      font = '16px Microsoft JhengHei'
    } = binding.value || {}

    // 1. 动态创建 canvas 元素
    const canvas = document.createElement('canvas')
    // 2. 设置该 canvas 的宽度与高度
    canvas.width = 205
    canvas.height = 140
    // 隐藏该 cavans
    canvas.style.display = 'none'

    // 3. 将 canvas 插入到当前 元素内
    el.appendChild(canvas)

    // 4. 获取 canvas 的 2d上下文对象
    const ctx = canvas.getContext('2d')

    ctx.rotate(-(20 * Math.PI) / 180)
    ctx.font = font
    ctx.fillStyle = color
    ctx.textAlign = 'left'
    ctx.textBaseline = 'Middle'
    ctx.fillText(text, canvas.width / 2, canvas.height / 2)

    // 5. 调用 canvas 元素 toDataURL 方法获取 图片
    const base64 = canvas.toDataURL()
    console.log('base64', base64)

    // 6. 将 el 的背景图片设置为当前的 base64
    el.style.backgroundImage = `url(${base64})`

    // 7. 将 canvas 元素给移除
    el.removeChild(canvas)
  }
}
